import { defineStore } from 'pinia'
import { exitFullscreen, openFullscreen } from '@/utils/utils'
import { i18nGlobal } from '@/language'
import { computed } from 'vue'
import type { DeskAppIconSize, DeskAppIconSort } from '@/stores/desk/systemSetting'
import type { ComputedRef } from 'vue'

export enum EContextMenuEvent {
  openApp = 'openApp', // 打开任务APP
  refresh = 'refresh', // 刷新
  hiddenDeskApp = 'hiddenDeskApp', // 隐藏桌面任务APP
  changeDeskAppSize = 'changeDeskAppSize', // 切换桌面任务APP icon大小
  changeDeskAppSort = 'changeDeskAppSort', // 切换桌面任务APP 排序
  showSetting = 'showSetting', // 显示系统设置
  checkRangeType = 'checkRangeType', // 切换类型
  checkFullscreen = 'checkFullscreen', // 切换全屏
  settingPersonality = 'settingPersonality' // 个性化设置
}

export enum EMenuRadio {
  deskIconSizeRadio = 'deskIconSizeRadio', // 桌面图标大小
  deskIconSortRadio = 'deskIconSortRadio' // 桌面图标排序
}

export interface IMenu {
  readonly id: number // 菜单ID
  readonly name: string // 菜单名称
  readonly event?: EContextMenuEvent // 菜单事件
  disabled: boolean // 菜单禁用
  radio?: EMenuRadio // 单选名称
  radioValue?: DeskAppIconSize | DeskAppIconSort // 单选的值
  isChecked?: boolean // 菜单是否选中
  checkIcon?: string // 菜单选中图标
  children?: IMenu[][] // 子菜单
}

export interface IContextMenu {
  appContextMenu: IMenu[][]
  systemContextMenu: IMenu[][]
}

export const ContextMenu: ComputedRef<IContextMenu> = computed(() => ({
  appContextMenu: [
    [
      { id: 1, name: i18nGlobal.t('contextmenu.open'), event: EContextMenuEvent.openApp, disabled: false },
      { id: 2, name: i18nGlobal.t('contextmenu.openFile'), disabled: false }
    ],
    [
      { id: 3, name: i18nGlobal.t('contextmenu.admin'), disabled: false },
      { id: 4, name: i18nGlobal.t('contextmenu.question'), disabled: false },
      { id: 5, name: i18nGlobal.t('contextmenu.start'), disabled: false }
    ],
    [{ id: 6, name: i18nGlobal.t('contextmenu.task'), disabled: false }],
    [{ id: 7, name: i18nGlobal.t('contextmenu.send'), disabled: false }],
    [
      { id: 8, name: i18nGlobal.t('contextmenu.cut'), disabled: false },
      { id: 9, name: i18nGlobal.t('contextmenu.copy'), disabled: false }
    ],
    [
      { id: 10, name: i18nGlobal.t('contextmenu.create'), disabled: false },
      { id: 11, name: i18nGlobal.t('contextmenu.delete'), disabled: false },
      { id: 12, name: i18nGlobal.t('contextmenu.rename'), disabled: false }
    ],
    [{ id: 13, name: i18nGlobal.t('contextmenu.attr'), disabled: false }]
  ],
  systemContextMenu: [
    [
      {
        id: 14,
        name: i18nGlobal.t('contextmenu.view'),
        disabled: false,
        children: [
          [
            {
              id: 15,
              name: i18nGlobal.t('contextmenu.big'),
              disabled: false,
              radio: EMenuRadio.deskIconSizeRadio,
              radioValue: 'big',
              isChecked: false,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSize
            },
            {
              id: 16,
              name: i18nGlobal.t('contextmenu.mid'),
              disabled: false,
              radio: EMenuRadio.deskIconSizeRadio,
              radioValue: 'mid',
              isChecked: false,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSize
            },
            {
              id: 17,
              name: i18nGlobal.t('contextmenu.small'),
              disabled: false,
              radio: EMenuRadio.deskIconSizeRadio,
              radioValue: 'min',
              isChecked: true,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSize
            }
          ],
          [
            {
              id: 18,
              name: i18nGlobal.t('contextmenu.auto'),
              disabled: false,
              isChecked: true,
              checkIcon: 'wos-checked-right'
            },
            {
              id: 19,
              name: i18nGlobal.t('contextmenu.pic'),
              disabled: false,
              isChecked: true,
              checkIcon: 'wos-checked-right'
            }
          ],
          [
            {
              id: 20,
              name: i18nGlobal.t('contextmenu.desk'),
              disabled: false,
              isChecked: true,
              checkIcon: 'wos-checked-right',
              event: EContextMenuEvent.hiddenDeskApp
            }
          ]
        ]
      },
      {
        id: 21,
        name: i18nGlobal.t('contextmenu.sort'),
        disabled: false,
        children: [
          [
            {
              id: 22,
              name: i18nGlobal.t('contextmenu.name'),
              disabled: false,
              radio: EMenuRadio.deskIconSortRadio,
              radioValue: 'name',
              isChecked: true,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSort
            },
            {
              id: 23,
              name: i18nGlobal.t('contextmenu.size'),
              disabled: false,
              radio: EMenuRadio.deskIconSortRadio,
              radioValue: 'size',
              isChecked: false,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSort
            },
            {
              id: 24,
              name: i18nGlobal.t('contextmenu.type'),
              disabled: false,
              radio: EMenuRadio.deskIconSortRadio,
              radioValue: 'class',
              isChecked: false,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSort
            },
            {
              id: 25,
              name: i18nGlobal.t('contextmenu.date'),
              disabled: false,
              radio: EMenuRadio.deskIconSortRadio,
              radioValue: 'date',
              isChecked: false,
              checkIcon: 'wos-dot',
              event: EContextMenuEvent.changeDeskAppSort
            }
          ]
        ]
      },
      { id: 26, name: i18nGlobal.t('contextmenu.refresh'), event: EContextMenuEvent.refresh, disabled: false }
    ],
    [
      {
        id: 27,
        name: i18nGlobal.t('contextmenu.mac'),
        disabled: false,
        isChecked: false,
        checkIcon: 'wos-checked-right',
        event: EContextMenuEvent.checkRangeType
      },
      {
        id: 28,
        name: i18nGlobal.t('contextmenu.screen'),
        disabled: false,
        isChecked: false,
        checkIcon: 'wos-checked-right',
        event: EContextMenuEvent.checkFullscreen
      }
    ],
    [
      { id: 29, name: i18nGlobal.t('contextmenu.paste'), disabled: false },
      { id: 30, name: i18nGlobal.t('contextmenu.pasteQuick'), disabled: false }
    ],
    [{ id: 31, name: i18nGlobal.t('contextmenu.add'), disabled: false }],
    [
      { id: 32, name: i18nGlobal.t('contextmenu.setting'), event: EContextMenuEvent.showSetting, disabled: false },
      {
        id: 33,
        name: i18nGlobal.t('contextmenu.personalization'),
        disabled: false,
        event: EContextMenuEvent.settingPersonality
      }
    ]
  ]
}))

export const useContextMenuStore = defineStore('ContextMenu', {
  state: (): IContextMenu => ({
    appContextMenu: ContextMenu.value.appContextMenu,
    systemContextMenu: ContextMenu.value.systemContextMenu
  }),
  getters: {
    getDeskAppHidden(): boolean {
      const children = this.systemContextMenu[0][0]?.children
      if (children) return !!children[2][0].isChecked
      return false
    }
  },
  actions: {
    // 递归找到menu
    findMenuData(fn: (val: IMenu) => boolean, list: IMenu[][] | undefined = undefined): IMenu | undefined {
      let menu: IMenu | undefined = undefined
      list = list || [...this.systemContextMenu, ...this.appContextMenu]
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        for (let j = 0; j < item.length; j++) {
          const child = item[j]
          if (fn(child)) {
            menu = child
            break
          }
          if (!menu && child.children?.length) {
            menu = this.findMenuData(fn, child.children)
            if (menu) break
          }
        }
        if (menu) break
      }
      return menu
    },
    // 获取特定值总和
    getMenuSameList(fn: (val: IMenu) => boolean, list: IMenu[][] | undefined = undefined): IMenu[] {
      const menuList: IMenu[] = []
      list = list || [...this.systemContextMenu, ...this.appContextMenu]
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        for (let j = 0; j < item.length; j++) {
          const child = item[j]
          if (fn(child)) menuList.push(child)
          if (child.children?.length) menuList.push(...this.getMenuSameList(fn, child.children))
        }
      }
      return menuList
    },
    // 切换菜单选中状态
    checkMenu(id: number, radio?: EMenuRadio, isChecked?: boolean) {
      const menuData = this.findMenuData((item) => item.id === id)
      if (menuData && menuData.checkIcon) {
        // 但有单选时 只能选中未选中数据
        if (menuData.radio && radio) {
          const radioList = this.getMenuSameList((item) => item.radio === radio)
          radioList.forEach((item) => {
            const find = this.findMenuData((child) => child.id === item.id)
            if (find) find.isChecked = find.id == id
          })
        } else {
          menuData.isChecked = arguments.length === 2 ? isChecked : !menuData.isChecked
        }
      }
    },
    // 隐藏桌面图标
    setDeskAppHidden(isHidden: boolean) {
      const children = this.systemContextMenu[0][0]?.children
      if (children) {
        children[2][0].isChecked = !isHidden
        children[1][0].disabled = isHidden
        children[1][1].disabled = isHidden
      }
    },
    // 隐藏桌面图标
    setDeskAppCheckRange(off: boolean) {
      const find = this.findMenuData((item) => item.event === EContextMenuEvent.checkRangeType)
      if (find) {
        find.isChecked = !off
        this.systemContextMenu[0][0].disabled = !off
      }
    },
    // 全屏使用
    setDeskAppFullscreen(isFull: boolean = false) {
      const find = this.findMenuData((item) => item.event === EContextMenuEvent.checkFullscreen)
      if (find) {
        if (isFull) {
          document.fullscreen ? exitFullscreen() : openFullscreen()
          find.isChecked = !document.fullscreen
        } else {
          find.isChecked = document.fullscreen
        }
      }
    }
  }
})
